﻿* {
    /* Universal reset: */
    margin: 0;
    padding: 0;
}

body {
    /* Setting the default text color, size, page background and a font stack: */
    font-size: 0.825em;
    color: #fcfcfc; /*background-color:#355664;*/
    background: url(../images/bg.jpg) repeat-x 50% 50% #1D1E1E;
    font-family: Arial, Helvetica, sans-serif;
}

/* Hyperlink Styles: */

a, a:visited {
    color: #FCFCFC;
    text-decoration: none;
    outline: none;
}
.content a, a:visited {
    text-decoration: underline;
    color: #A5A0A2;
}
a:hover {
    text-decoration: underline;
}

a img {
    border: none;
}

/* Headings: */

h1, h2, h3 {
    font-family: "Myriad Pro" , "Helvetica Neue" ,Helvetica,Arial,Sans-Serif;
    text-shadow: 0 1px 1px black;
}

h1 {
    /* The logo text */
    font-size: 3.5em;
    padding: 0.5em 0 0;
    text-transform: uppercase;
    color: #044a65;
}

.stylishHeader {
    /* The slogan text */
    font-family: forte, "Myriad Pro" , "Helvetica Neue" ,Helvetica,Arial,Sans-Serif;
    font-size: 1.2em;
    font-weight: normal;
    margin: 0 0 1em;
}


h2 {
    font-size: 2.2em;
    font-weight: normal;
    letter-spacing: 0.01em;
}

p {
    line-height: 1.5em;
    padding-bottom: 1em;
}

.line {
    /* The dividing line: */
    height: 1px;
    background-color: #024e6c;
    border-bottom: 1px solid #024057;
    margin: 1em 0;
    overflow: hidden;
}

article .line {
    /* The dividing line inside of the article is darker: */
    background-color: #15242a;
    border-bottom-color: #204656;
    margin: 1.3em 0;
}

footer .line {
    margin: 2em 0;
}

nav, nav#Login {
    background: url(../images/blue-gradient.png) repeat-x 50% 50% #044a65;
    padding: 0 5px;
    float: right;
    margin-top: -85px;
    border: 1px solid #FFF;
    -moz-box-shadow: 0 1px 1px #044a65;
    -webkit-box-shadow: 0 1px 1px #044a65;
    box-shadow: 0 1px 1px #044a65;
}

/* The clearfix hack to clear the floats: */

.clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* The navigation styling: */

nav ul li {
    display: inline;
}

nav ul li a, nav ul li a:visited {
    color: #FFF;
    display: block;
    float: left;
    font-size: 1.25em;
    font-weight: bold;
    margin: 5px 2px;
    padding: 7px 10px 4px;
    text-shadow: 0 1px 1px #565656;
    text-transform: uppercase;
}

nav ul li a:hover {
    text-decoration: none;
    background-color: #024057;
}

nav, article, nav ul li a, figure {
    /* Applying CSS3 rounded corners: */
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/* Article styles: */

#page {
    width: 90%;
    margin: 0 auto;
    position: relative;
}

.content {
    /*background-color:#213E4A;*/
    background-color: #033d52;
    margin: 2em 0;
    padding: 20px;
    text-shadow: 0 2px 0 black;
    border: 4px solid #F0F0F0;
    border-radius: 12px 12px 12px 12px;
}

figure {
    border: 3px solid #142830;
    float: right;
    height: 300px;
    margin-left: 15px;
    overflow: hidden;
    width: 500px;
}
#login {
    /* 	margin-right:-24px; 	background: none repeat scroll 0 0 transparent; 	float:right; */
    margin-top: -125px;
    text-align: center;
    width: 200px;
    height: 18px;
    padding: 8px;
}
figure:hover {
    -moz-box-shadow: 0 0 2px #4D7788;
    -webkit-box-shadow: 0 0 2px #4D7788;
    box-shadow: 0 0 2px #4D7788;
}

figure img {
    margin-left: -60px;
}

/* Footer styling: */

footer {
    margin-bottom: 30px;
    text-align: center;
    font-size: 0.825em;
}


footer p {
    margin-bottom: -2.5em;
    position: relative;
}

footer a, footer a:visited {
    color: #cccccc;
    background-color: #213e4a;
    display: block;
    padding: 2px 4px;
    z-index: 100;
    position: relative;
}

footer a:hover {
    text-decoration: none;
    background-color: #AACA56;
}

footer a.by {
    float: left;
}

footer a.up {
    float: right;
}

a.nobg, a.nobg:hover {
    background-color: transparent !important;
}
/* Only used for the demo page at tutorialzine: */

.title {
    color: #666666;
    font-size: 2em;
    font-weight: bold;
    text-shadow: 0 1px 1px white;
}



/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
    color: #ff0000;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors {
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid {
    display: none;
}

/* Styles for editor and display helpers
----------------------------------------------------------*/
.display-label, .editor-label {
    margin: 1em 0 0 0;
}

.display-field, .editor-field {
    margin: 0.5em 0 0 0;
}

.text-box {
    width: 30em;
}

.text-box.multi-line {
    height: 6.5em;
}

.tri-state {
    width: 6em;
}

/******Form******/
form {
    /* set width in form, not fieldset (still takes up more room w/ fieldset width */
    font: 100% verdana,arial,sans-serif;
    margin: 0 auto;
    padding: 0;
    min-width: 500px;
    max-width: 600px;
    width: 560px;
}

form fieldset {
    /*  clear: both; note that this clear causes inputs to break to left in ie5.x mac, commented out */
    border: 1px solid #60666A;
    padding: 10px; /* padding in fieldset support spotty in IE */
    margin: 0;
}

form fieldset legend {
    font-size: 1.1em; /* bump up legend font size, not too large or it'll overwrite border on left */ /* be careful with padding, it'll shift the nice offset on top of border  */
}

form label {
    display: block; /* block float the labels to left column, set a width */
    float: left;
    width: 120px;
    padding: 0;
    margin: 5px 0 0; /* set top margin same as form input - textarea etc. elements */
    text-align: right;
}

form fieldset label:first-letter {
    /* use first-letter pseudo-class to underline accesskey, note that */
    text-decoration: underline; /* Firefox 1.07 WIN and Explorer 5.2 Mac don't support first-letter */ /* pseudo-class on legend elements, but do support it on label elements */ /* we instead underline first letter on each label element and accesskey */ /* each input. doing only legends would  lessens cognitive load */ /* opera breaks after first letter underlined legends but not labels */
}

form input, form textarea {
    /* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */
    width: auto; /* set width of form elements to auto-size, otherwise watch for wrap on resize */
    margin: 5px 0 0 10px; /* set margin on left of form elements rather than right of 							  label aligns textarea better in IE */
    float: left;
}

form input#reset {
    margin-left: 0px; /* set margin-left back to zero on reset button (set above) */
}

textarea {
    overflow: auto;
}

form small {
    display: block;
    margin: 0 0 5px 160px; /* instructions/comments left margin set to align w/ right column inputs */
    padding: 1px 3px;
    font-size: 88%;
}

form .required {
    font-weight: bold;
}
/* uses class instead of div, more efficient */

form br {
    clear: left; /* setting clear on inputs didn't work consistently, so brs added for degrade */
}
.centered {
    margin-left: 110px;
}
input.submit {
    width: 150px;
    color: #333;
    text-transform: uppercase;
    margin-top: 10px;
    background-color: #CCC;
    border: none;
    margin-left: 120px; /* -- CSS3 Transition - define which property to animate (i.e. the shadow)  -- */
    -webkit-transition: -webkit-box-shadow 0.3s linear; /* -- CSS3 - Rounded Corners -- */
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px; /* -- CSS3 Shadow - create a shadow around each input element -- */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#CCCCCC));
    background: -moz-linear-gradient(25% 75% 90deg,#CCC, #EEEEEE);
}


input.submit:hover {
    box-shadow: 0 0 20px #615F5F;
    cursor: pointer;
}


ol li {
  
    border-style: solid;
    border-width: 2px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    line-height: 30px;
    list-style: none;
    padding: 5px 10px;
    margin-bottom: 2px;
}
ol ol li {
    background: none;
    border: none;
    float: left;
}

